
<!--标签-->
<template>
    <div class="tabs">
        <el-tag
                size="small"
                :key="tag.name"
                v-for="tag in tags"
                :closable="tag.name !=='home'"
                :disable-transitions="false"
                @close="handleClose(tag)"
                :effect="$route.name  ===tag.name ? 'dark':'plain'"
                @click="changeMenu(tag)">
            {{tag.label}}
        </el-tag>
    </div>
</template>

<script>
    import {mapState,mapMutations} from 'vuex'
    export default {
        computed:{
            ...mapState({
                tags : state => state.tab.tabsList
            })
        },
        name: "CommonTab",
        data() {
            return {
                dynamicTags: ['标签一', '标签二', '标签三'],
                inputVisible: false,
                inputValue: ''
            };
        },
        methods: {
            ...mapMutations({
                close:'closeTab'
            }),
            handleClose(tag) {
                this.close(tag)
            },
            changeMenu(item){
                this.$router.push({name:item.name}),
                    this.$store.commit('selectMenu',item)
            }

        }

    }
</script>

<style scoped>
    .el-tag + .el-tag {
        margin-left: 10px;
    }
    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }
    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
<style lang="css">
    .tabs{
        padding: 20px;
        cursor: pointer;
    }
    el-tag{
        margin-right: 15px;
    }
</style>